<template>
  <div class="Main">
    <!--<HelloWorld msg="Welcome to Your Vue.js App"/>-->
      <transition name="slide-fade">
      <router-view name="main_rv" />
      </transition>
      <van-tabbar v-model="mainActiveView" active-color="#f39801" :z-index=100>
          <van-tabbar-item icon="home-o" to="/main/home" replace>主页</van-tabbar-item>
          <van-tabbar-item icon="search" to="/main/search" replace>搜索</van-tabbar-item>
          <van-tabbar-item to="/editPaper">
              <van-icon color="#f39801" name="add" slot="icon" slot-scope="props" size="0.90rem"/>
          </van-tabbar-item>
          <van-tabbar-item icon="envelop-o" to="/main/msg" replace>消息</van-tabbar-item>
          <van-tabbar-item icon="user-o" to="/main/user" replace>我的</van-tabbar-item>
      </van-tabbar>

  </div>
</template>

<script>
// @ is an alias to /src
import storeUtil from '../utils/storeUtil'

export default {
    computed:{
        ...storeUtil.makeFields('mainActiveView')
    },
    data()
{
    return{


    }
},
  name: 'Main',
  components: {
  }
}
</script>
<style>
    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    /*.slide-fade-leave-active {*/
    /*    transition: all .3s ease;*/
    /*}*/
    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */ {
        /*transform: translateY(10rem);*/
        transform: scale(1.5);
        opacity: 0;
    }

</style>
